<template>
  <div class="openInfo" @scroll="loadMore">
    <div class="header">
      <van-nav-bar
        title="全部课程"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <!-- 全部课程内容 -->
    <div class="open-con">
      <div class="open-wrap" v-for="item in res.videoshares" :key="item.id">
        <h3>{{ item.title }}</h3>
        <p class="open-text">{{ item.summary }}</p>
        <h4>{{ new Date(item.publishTime).getFullYear() }}-{{new Date(item.publishTime).getMonth()+1}}-{{new Date(item.publishTime).getDate()}}</h4>
        <img :src="item.videoCoverUrl" alt="" />
        <div class="lookInfo">
          <div class="view">
            <i class="iconfont icon-pengyou"></i>
            <p>{{ item.viewCount }}</p>
          </div>
          <div class="comment">
            <i class="iconfont icon-pinglun"></i>
            <p>{{ item.commentCount }}</p>
          </div>
          <div class="like">
            <i class="iconfont icon-dianzan"></i>
            <p>{{ item.likeCount }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getCurrentInstance, reactive } from "vue";
const { $axios } = getCurrentInstance().appContext.config.globalProperties;

const onClickLeft = () => history.back();

let res = reactive({
  videoshares: {},
  page:1,  // 触底加载的页码
});

// var timer = 1645171583729;
// var date = new Date(timer);
// var y = date.getFullYear();
// var m = date.getMonth() + 1;
// var d = date.getDate();
// console.log(y, m, d);
// document.write(y + "-" + m + "-" + d);


// https://api.xuantong.cn/core/api/videoshares?page=1&pageSize=10
$axios("/apixt/core/api/videoshares?page=1&pageSize=10", "GET").then((data) => {
  res.videoshares = data.data;
  console.log(res.videoshares);
});
</script>

<style lang="less">
.openInfo {
  height: 100vh;
  overflow-y: scroll;
  &::-webkit-scrollbar {
    display: none;
  }
  .open-con {
    padding: 25px;
    .open-wrap {
      padding: 30px 0;
      border-bottom: 1px solid #ccc;
      h3 {
        font-weight: normal;
        color: #333;
        font-style: 18px;
      }
      .open-text {
        font-size: 14px;
        line-height: 25px;
        color: #999;
        margin-top: 20px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      h4{
        color: #c2c2c2;
        font-size: 14px;
        font-weight: normal;
        margin-top: 10px;;
      }
      img {
        height: 180px;
      }
      .lookInfo {
        display: flex;
        justify-content: space-around;
        margin-top: 10px;
        i {
          color: #c4a57f;
          font-size: 16px;
        }
        P {
          margin-left: 5px;
          color: #999;
        }
        .view {
          display: flex;
        }
        .comment {
          display: flex;
        }
        .like {
          display: flex;
        }
      }
    }
  }
}
</style>
